<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="../css/common.css" media="all" />
<link rel="stylesheet" type="text/css" href="../css/article.css" media="all" />
</head>
<body>
<div id="w3h_body">
  <div class="body_content">
    <!-- toc begin -->
    <h1 class="title">BX2050: 各浏览器禁止内容选中的方式不同</h1>
    <ul class="toc">
      <li><a href="#standard_reference">标准参考</a> <span>•</span></li>
      <li><a href="#description">问题描述</a> <span>•</span></li>
      <li><a href="#influence">造成的影响</a> <span>•</span></li>
      <li><a href="#impacted_browsers">受影响的浏览器</a> <span>•</span></li>
      <li><a href="#analysis_of_issues">问题分析</a> <span>•</span></li>
      <li><a href="#solutions">解决方案</a> <span>•</span></li>
      <li><a href="#see_also">参见</a></li>
    </ul>
    <!-- toc end -->
    <div id="w3h_content">
      <!-- content begin -->
      <address class="author">作者：段立新</address>
      <h2 id="standard_reference">标准参考</h2>
      <p>无</p>


      <h2 id="description">问题描述</h2>
      <p>各浏览器禁止内容选中的方式不同，Firefox Chrome Safari 都有私有 CSS 样式控制，IE 通过标签属性和标签方法控制，Opera 通过标签属性控制。</p>

      <h2 id="influence">造成的影响</h2>
      <p>若只使用某一浏览器支持的禁止内容选中，则其他浏览器仍然可以选中内容。</p>

      <h2 id="impacted_browsers">受影响的浏览器</h2>
      <table class="list">
        <tr>
          <th>所有浏览器</th>
          <td>&nbsp;</td>
        </tr>
      </table>
      
      <h2 id="analysis_of_issues">问题分析</h2>
      <p>各浏览器对禁止内容选中，各有各自的办法：</p>
      <p>MSDN 中关于标签属性 'unselectable' ，参见：<a href="http://msdn.microsoft.com/en-us/library/ms534706(VS.85).aspx">http://msdn.microsoft.com/en-us/library/ms534706(VS.85).aspx</a> 。</p>
      <p>MSDN 中关于标签方法 onselectstart ，参见：<a href="http://msdn.microsoft.com/en-us/library/ms536969(VS.85).aspx">http://msdn.microsoft.com/en-us/library/ms536969(VS.85).aspx</a> 。</p>
      <p>Firefox 中私有样式 -moz-user-select ，参见：<a href="https://developer.mozilla.org/en/CSS/-moz-user-select">https://developer.mozilla.org/en/CSS/-moz-user-select</a> 。</p>
      <p>Chrome 和 Safari 中私有样式 -webkit-user-select ，参见：<a href="http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html">http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html</a> 。</p>
      <p>分析以下代码：</p>
<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;
&lt;div <span class="hl_3">unselectable="on"</span> style="background:#CCC;" &gt;unselectable=on &lt;/div&gt;
&lt;br/&gt;
&lt;div style="background:#CCC;<span class="hl_4">-webkit-user-select:none;"</span> &gt;-webkit-user-select:none;&lt;/div&gt;
&lt;br/&gt;
&lt;div style="background:#CCC;<span class="hl_2">-moz-user-select:none;"</span> &gt;-moz-user-select:none;&lt;/div&gt;
&lt;br/&gt;
&lt;div style="background:#CCC;" <span class="hl_1">onselectstart="return false;"</span> &gt;onselectstart="return false;"&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
      <p>在各浏览器中效果如下：</p>
      <table class="compare">
        <tr>
          <th>&nbsp;</th>
          <th>IE</th>
          <th>Firefox</th>
          <th>Chrome Safari</th>
          <th>Opera</th>
        </tr>
        <tr>
          <td>unselectable=&quot;on&quot;</td>
          <td><span class="hl_2">yes</span><sup>1</sup></td>
          <td><span class="hl_1">no</span><sup>2</sup></td>
          <td><span class="hl_1">no</span></td>
          <td><span class="hl_2">yes</span></td>
        </tr>
        <tr>
          <td>-webkit-user-select:none;</td>
          <td><span class="hl_1">no</span></td>
          <td><span class="hl_1">no</span></td>
          <td><span class="hl_2">yes</span></td>
          <td><span class="hl_1">no</span></td>
        </tr>
        <tr>
          <td>-moz-user-select:none;</td>
          <td><span class="hl_1">no</span></td>
          <td><span class="hl_2">yes</span></td>
          <td><span class="hl_1">no</span></td>
          <td><span class="hl_1">no</span></td>
        </tr>
        <tr>
          <td>onselectstart="return false;"</td>
          <td><span class="hl_2">yes</span></td>
          <td><span class="hl_1">no</span></td>
          <td><span class="hl_2">yes</span></td>
          <td><span class="hl_1">no</span></td>
        </tr>
      </table>
      <p class="comment">注1：可以禁止内容选中。</p>
      <p class="comment">注2：没有禁止内容选中。</p>
      <p>可见，禁止内容选中的方法如下：</p>
      <ul>
        <li>IE 给标签设置 unselectable= &quot;on&quot; ，设置标签方法 onselectstart=&quot;return false;&quot;</li>
        <li>Firefox 给标签设置私有样式 -moz-user-select:none 。</li>
        <li>Chrome Safari 给标签设置私有样式 -webkit-user-select:none ，设置标签方法 onselectstart=&quot;return false;&quot;。</li>
        <li>Opera 给标签设置 unselectable= &quot;on&quot; 。</li>
      </ul>

      <h2 id="solutions">解决方案</h2>
      <p>给标签设置样式 -moz-user-select:none ;-webkit-user-select:none 同时标签设置 unselectable= &quot;on&quot; ，保证各浏览器都可以禁止内容选中。</p>

      <h2 id="see_also">参见</h2>
      <h3>知识库</h3>
      <ul class="see_also">
        <li><a href="#">...</a></li>
      </ul>

      <h3>相关问题</h3>
      <ul class="see_also">
        <li><a href="#">...</a></li>
      </ul>

      <div class="appendix">
        <h2>测试环境</h2>
        <table class="list">
          <tr>
            <th>操作系统版本:</th>
            <td>Windows 7 Ultimate build 7600</td>
          </tr>
          <tr>
            <th>浏览器版本:</th>
            <td>
              IE6<br />
              IE7<br />
              IE8<br />
              Firefox 3.6.10<br />
              Chrome 7.0.544.0 dev<br />
              Safari 5.0.2<br />
              Opera 10.62
            </td>
          </tr>
          <tr>
            <th>测试页面:</th>
            <td><a href="../../tests/BX2050/non_select.html">non_select.html</a></td>
          </tr>
          <tr>
            <th>本文更新时间:</th>
            <td>2010-10-12</td>
          </tr>
        </table>

        <h2>关键字</h2>  
        <!-- keywords begin -->
        <p>-moz-user-select 私有属性 -webkit-user-select onselectstart unselectable</p>
        <!-- keywords end -->
      </div>
      <!-- content end -->
    </div>
  </div>
</div>
</body>
</html>
